<template>
  <div class="plan">
    <div class="title" @click="showYear">
      {{ year }}年周计划
    </div>
    <div class="white-block time-filter">
      <span class="label">历史计划</span>
<!--      <span class="date" v-if="filterDate">2021-01-22 到 2021-02-22</span>-->
      <span class="place" @click="toRecord" >查看明细</span>
    </div>
<!--    <calendar mode="during"  @change="changeDate"  :show.sync="dateShow"  />-->
    <div class="weeks">
      <div class="white-block week"   @click="click(item)" :class="{done:item.done,score:new Date()>new Date(item.endDate)&&item.score}" v-for="(item) in weeks" :key="item.index">
        <span class="week-name">{{item.weekName}}</span>
        <span class="week-date">{{item.startDate}} - {{item.endDate}}</span>
        <span class="week-status" v-if="!item.done">未创建</span>
        <span class="week-status" v-if="item.done&&!item.score">已创建</span>
        <span class="week-status" v-if="new Date().toLocaleDateString()>item.endDate&&item.score">平均{{item.score}}分</span>
      </div>
    </div>
<!--    <div class="btns">-->
<!--      <div class="left-btn btn">-->
<!--        修改任务-->
<!--      </div>-->
<!--      <div class="right-btn btn">-->
<!--        历史查询-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import { listByYear, add } from '@/api/plan'
import { showAlert, showConfirm } from '@/dialog'
import { parseTime } from '@/util/time'

export default {
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.weeks = Object.values(this.getWeeks()).map((week, index) => {
        let weekName = '第' + (index + 1) + '周'
        if (new Date(week[0]) <= new Date() && new Date(week[week.length - 1]) >= new Date()) {
          weekName = '当前周'
        }
        return {
          startDate: week[0],
          endDate: week[week.length - 1],
          done: false,
          week: index + 1,
          weekName,
          score: null,
          days: week.length
        }
      })
      listByYear(this.year).then(res => {
        const plans = res.data
        plans.forEach(plan => {
          this.weeks[plan.week - 1].done = true
          this.weeks[plan.week - 1].id = plan.id
          // 判断如果时间已经过了
          if (new Date() > new Date(this.weeks[plan.week - 1].endDate)) {
            // this.weeks[plan.week - 1].score = (plan.score / this.weeks[plan.week - 1].days).toFixed(2)
            this.weeks[plan.week - 1].score = plan.avg
          }
        })
      })
    },
    showYear () {
      this.dateShow = true
      this.$createActionSheet({
        title: '选择年份',
        data: [
          {
            content: '2021'
          },
          {
            content: '2022'
          },
          {
            content: '2023'
          },
          {
            content: '2024'
          }
        ],
        onSelect: this.changeYear
      }).show()
    },
    toRecord () {
      this.$router.push({
        path: '/todo/record'
      })
    },
    changeYear (item) {
      if (item.content > new Date().getFullYear()) {
        showAlert('无法选择未来年份')
        return true
      }
      this.year = item.content
      this.initData()
      // this.$router.reload()
      // this.dateShow = false
    },
    click (item) {
      if (item.done) {
        this.toWeek(item)
      } else {
        this.add(item)
      }
    },
    toWeek (item) {
      this.$router.push({
        path: '/plan/week',
        query: {
          startDate: item.startDate,
          endDate: item.endDate,
          week: item.week,
          planId: item.id
        }
      })
    },
    add (item) {
      showConfirm('确定创建周计划吗?').then(res => {
        if (!res) return
        add(parseTime(item.startDate), parseTime(item.endDate), this.year, item.week).then(res => {
          item.done = true
          item.id = res.data.id
          showAlert('创建成功,点击继续完善日程').then(res => {
            this.toWeek(item)
          })
        })
      })
    },
    getWeeks () {
      const year = new Date().getFullYear()
      const weeks = {}
      let eachWeek = []
      let index = 1
      const yearStart = new Date(year.toString() + '/1/1').valueOf()
      const yearEnd = new Date((Number(year) + 1).toString() + '/1/1').valueOf() - 1
      for (let i = yearStart; i < yearEnd; i += 86400000) {
        const date = new Date(i).toLocaleDateString()
        const day = new Date(i).getDay()
        eachWeek.push(date)
        weeks[index] = eachWeek
        if (day === 0) {
          index += 1
          eachWeek = []
        }
      }
      return weeks
    }
  },
  computed: {
  },
  data () {
    return {
      dateShow: false,
      year: new Date().getFullYear(),
      weeks: {},
      filterDate: null
    }
  }
}
</script>

<style scoped lang="stylus">
.plan
  padding 10px 10px

  .title
    width 100%
    height 60px
    color #55545D
    font-size 22px
    display flex
    justify-content center
    align-items center
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);

  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px

    .place
      font-size 16px
      color red

  .weeks
    margin-top 20px
    padding-bottom 40px
    .week
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      //.week-status
      //  min-width fit-content
      &.done
        background-color white
      &.score
        background-color #F5F4F7
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
</style>
